<template>
  <div class="source-selector-container">
    <div>
      <div class="source-selection-area" style="margin-bottom: 10px">
        <div class="selection-label">Selected Sources:</div>
        <div class="selected-platforms">
          {{ filteredPlatforms.join(", ") }}
        </div>
      </div>
      <div class="source-selection-area">
        <div class="selection-label">Selected Time:</div>
        <div class="selected-platforms">
          {{ startDate || "未选择" }} <i class="el-icon-minus"></i>
          {{ endDate || "未选择" }}
        </div>
      </div>
    </div>
    <div class="color-indicator-wrapper">
      <div class="color-indicator-row">
        <div style="margin-right: 5px; font-weight: bold; font-size: 0.1111rem">
          Score Color Guide
        </div>
        <div
          v-for="n in 10"
          :key="n"
          class="color-block"
          :class="getBlockColor(n)"
        >
          <span class="block-text">{{ n }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  props: {
    startDate: {
      type: String,
      default: "",
    },
    endDate: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      ratingInfos: [], // 假设这是从其他地方获取的平台数据
    };
  },
  computed: {
    // 正确获取Vuex中的多个state
    ...mapState("reviewReply", {
      selectedPlatforms: (state) => state.selectedPlatforms,
      vuexDateRange: (state) => state.dateRange || {}, // 添加默认空对象
    }),
    // 最终使用的日期（优先使用props，其次使用vuex）
    finalStartDate() {
      return this.startDate || this.vuexDateRange.start || "";
    },
    finalEndDate() {
      return this.endDate || this.vuexDateRange.end || "";
    },
    // 新增过滤方法
    filteredPlatforms() {
      return this.selectedPlatforms.filter(
        (platform) => platform && platform.trim() !== ""
      );
    },
  },
  created() {
    // 初始化时从Vuex获取或设置默认值
    if (this.selectedPlatforms.length === 0) {
      const allPlatforms = this.ratingPlatforms.map((p) => p.platform);
      this.updateSelectedPlatforms(allPlatforms);
    }
  },
  methods: {
    ...mapActions("reviewReply", ["updateSelectedPlatforms"]),

    getBlockColor(n) {
      if (n >= 9) return "score-deep-green";
      if (n >= 8) return "score-green";
      if (n >= 7) return "score-yellow";
      if (n >= 5) return "score-orange";
      if (n >= 3) return "score-red";
      return "score-deep-red";
    },
  },
};
</script>

<style scoped lang="scss">
.source-selector-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // background: #f5f2ea;
  // background: #fff;
  // border: 1px solid #eee;
  // border-radius: 16px;

  padding: 10px 20px;
}

.source-selection-area {
  display: flex;
  align-items: center;
}

.selection-label {
  font-weight: bold;
  font-size: 0.1111rem;
  margin-right: 10px;
}

.selected-platforms {
  font-size: 0.1111rem;
  color: #000;
}

.color-indicator-wrapper {
  display: flex;
  align-items: center;
}

.color-indicator-row {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.color-block {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 0.0833rem;

  box-sizing: border-box;
}

.block-text {
  // color: white;
}

.score-deep-green {
  margin-right: 3px;
  color: #006400;
}
.score-green {
  color: #2faa68;
  margin-right: 3px;
}
.score-yellow {
  color: #ffcc00;
  margin-right: 3px;
  // .block-text {
  //   color: #fff; // 黄色背景上使用深色文字
  // }
}
.score-orange {
  color: #f68d2b;
  margin-right: 3px;
}
.score-red {
  color: #e51837;
  margin-right: 3px;
}
.score-deep-red {
  color: #8b0000;
  margin-right: 3px;
}
.score-na {
  margin-right: 3px;
  color: #6a6969;
  font-size: 0.0972rem;
  font-weight: 500;
}
// .score-deep-green {
//   background-color: #1a7a1a;  // 原#006400 → 饱和度降低30%
// }
// .score-green {
//   background-color: #4fb883;  // 原#2faa68 → 饱和度降低25%
// }
// .score-yellow {
//   background-color: #ffd633;  // 原#ffcc00 → 饱和度降低20%
//   .block-text {
//     color: #fff;
//   }
// }
// .score-orange {
//   background-color: #f8a15a;  // 原#f68d2b → 饱和度降低25%
// }
// .score-red {
//   background-color: #eb4d5c;  // 原#e51837 → 饱和度降低30%
// }
// .score-deep-red {
//   background-color: #a13333;  // 原#8b0000 → 明度提高10%+饱和度降15%
// }
// .score-na {
//   background-color: #888888;  // 原#6a6969 → 明度提高15%（中性色无饱和度概念）
//   font-size: 14px;
//   font-weight: 500;
// }
</style>
